<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<style type="text/css">
			.box {
				display: inline-block;
				width: 50px;
				height: 50px;
			}

			.inner {
				background-color: blue;
				height: 100%;
				color: white;
				text-align: center;
				vertical-align: middle;
			}

			.inner:after {
				content: '';
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}

			@keyframes wider {
				from {
					width: 50px;
				}

				to {
					width: 200px;
				}
			}

			#demo1 .inner {
				animation: wider 1s;
			}

			#demo2:hover .inner {
				animation: wider 1s;
			}

			#demo3:hover .inner {
				animation: wider 1s ease 1s;
			}

			#demo4:hover .inner {
				animation: wider 1s infinite;
			}

			#demo5:hover .inner {
				animation: wider 1s infinite alternate;
			}

			#demo6:hover .inner {
				animation: wider 1s forwards;
			}
		</style>
	</head>
	<body>
		<section>
			<h3>动画</h3>
			<p>@keyframes 定义动画</p>
			<p>animation 应用动画</p>
		</section>
		<section>
			<h3>@keyframes</h3>
			<p>语法1：@keyframes 动画名称 {from {起始样式} to {结束样式 }}</p>
			<p>语法2：@keyframes 动画名称 {0% {起始样式} 10% {中间样式} 50% {中间样式} 100% {结束样式 }}</p>
		</section>
		<section>
			<h3>animation 语法</h3>
			<p>animation: 动画名称 动画时长 速度曲线 延时时长 播放次数</p>
		</section>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例 - 普通</h3>
					<div id="demo1" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例 - 悬停时开始</h3>
					<div id="demo2" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例 - 延迟开始</h3>
					<div id="demo3" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例 - 无限循环</h3>
					<div id="demo4" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
		</div>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>实例 - 交替反向</h3>
					<div id="demo5" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>实例 - 结束后固定</h3>
					<div id="demo6" class="box">
						<p class="inner">变宽</p>
					</div>
				</section>
			</div>
			<div class="col-1">
			</div>
			<div class="col-1">
			</div>
		</div>
		<style type="text/css">
			#demo10 {
				background-color: #53becc;
				color: white;
				padding: 10px;
			}

			.ball {
				position: relative;
				margin: 10px auto;
				width: 80px;
				height: 80px;
			}

			.ball .content {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: radial-gradient(farthest-corner at 30% 1%, #fcc, #f93);
				border: 2px solid white;
			}

			.ripple {
				position: absolute;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #f93;				
				animation: wave 1.5s infinite;
			}

			@keyframes wave {
				from {
					opacity: 1;
					transform: scale(1);
				}

				to {
					opacity: 0;
					transform: scale(1.5);
				}
			}


			.motto {
				padding: 10px;
				text-align: center;
			}
		</style>
		<div id="demo10">
			<div class="ball">
				<div class="ripple"></div>
				<div class="content">登录</div>
			</div>
			<div class="motto">自律人生，从写报告开始</div>
		</div>
	</body>
</html>
